<template>
  <!-- tab -->
  <div class="tab-bar">
    <a href="#/index">
      <i :class="page==='shop'?'shop-active':'shop'"></i>
      <p :class="{active:page==='shop'}">应用商店</p>
    </a>
    <a href="#/shop">
      <i :class="page==='chat'?'chat-active':'chat'"></i>
      <p :class="{active:page==='chat'}">会话</p>
    </a>
    <a href="#/shop">
      <i :class="page==='punctuation'?'punctuation-active':'punctuation'"></i>
      <p :class="{active:page==='punctuation'}">标点</p>
    </a>
    <a href="#/user">
      <i :class="page==='user'?'user-active':'user'"></i>
      <p :class="{active:page==='user'}">我的</p>
    </a>

  </div>
</template>
<style lang="less" rel="stylesheet/less" scoped>
  .tab-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: .49rem;
    display: flex;
    background: #F0F0F0;
    z-index: 1000;
    a {
      padding: .06rem 0 .03rem;
      flex: 1;
      text-align: center;
      i {
        display: inline-block;
        width: .24rem;
        height: .24rem;
        margin-bottom: .03rem;
        background-repeat: no-repeat;
        background-size: .24rem .24rem;
      }
      .shop {
        background-image: url("../../assets/img/house/tabBar/shop01.png");
      }
      .chat {
        background-image: url("../../assets/img/house/tabBar/chat01.png");
      }
      .punctuation {
        background: url("../../assets/img/house/tabBar/punctuation01.png");
        background-size: .175rem .225rem;
        width: .175rem;
        height: .225rem;
      }
      .user {
        background-image: url("../../assets/img/house/tabBar/user01.png");
      }
      .shop-active {
        background-image: url("../../assets/img/house/tabBar/shop02.png");
      }
      .chat-active {
        background-image: url("../../assets/img/house/tabBar/chat02.png");
      }
      .punctuation-active {
        background-image: url("../../assets/img/house/tabBar/punctuation02.png");
        background-size: .175rem .225rem;
        width: .175rem;
        height: .225rem;
      }
      .user-active {
        background-image: url("../../assets/img/house/tabBar/user02.png");
      }
      p {
        color: #333;
        font-size: .09rem;
        line-height: .12rem;
        &.active {
          color: #157FFB;
        }
      }
    }
  }
</style>
<script>
  export default {
    props: ['page']
  }

</script>
